<template>
  <el-dialog
    :title="$t('personalcenter.modPhone')"
    :visible="visible"
    destroy-on-close
    :center="true"
    width="350px"
    class="telPhone-dialog"
    @close="onClose"
    @open="onOpen"
  >
    <div class="step-style">
      <el-steps :active="active">
        <el-step :title="$t('account.oldNumber')" />
        <el-step :title="$t('account.newNumber')" />
      </el-steps>
    </div>
    <transition name="rotate-x" appear mode="out-in">
      <template v-if="phoneType === 'old'">
        <SendCode
          key="old"
          phone-type="old"
          :default-phone="modalData.telPhone"
          @onOk="onNext"
          @onClose="onClose"
        />
      </template>
      <template v-if="phoneType === 'new'">
        <SendCode
          key="new"
          phone-type="new"
          @onOk="onSubmit"
          @onClose="onClose"
        />
      </template>
    </transition>
  </el-dialog>
</template>

<script>
import SendCode from './SendCode'
// import { Message } from 'element-ui'

export default {
  name: 'OrderEdit',
  components: {
    SendCode
  },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    modalData: {
      default() {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      phoneType: '',
      active: 1
    }
  },
  // computed: {},
  // mounted() {},
  methods: {
    onClose() {
      this.$store.dispatch('hideModal')
      this.phoneType = ''
    },
    onOpen() {
      this.phoneType = 'old'
      this.active = 1
    },
    onNext() {
      this.phoneType = 'new'
      this.active = 2
    },
    onSubmit({ telPhone }) {
      this.onClose()
      this.$emit(
        'update:modalData',
        Object.assign({}, this.modalData, { telPhone })
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.telPhone-dialog {
  >>> .el-dialog {
    > .el-dialog__body {
      padding-top: 0;
      .el-input {
        width: 100%;
      }
    }
  }
}
.step-style {
  margin: 0 30px 10px;
}
</style>
